<template>
  <div class="flex jusitfy-center aitems-center h-full w-full">
    <div class="m-10px w-[49%] ">
      <esMap id="map" ref="mapComponents" class="border-radius-5 box-shadow-375991" :currentLayerIndex="2"
        :isDraw="!props.isComponentsDisabled" />
    </div>
    <div class="h-[100%] w-[50%] ">
      <addHeader ref="addheader" @on-save="onSave" @on-close="onClose"
        :isComponentsDisabled="props.isComponentsDisabled">
      </addHeader>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRefs, defineProps, nextTick, onMounted } from 'vue'
import addHeader from './addHeader.vue'

let props = defineProps({
  isComponentsDisabled: {
    type: Boolean,
  },
  componentData: {
    type: Object
  }
})
const emit = defineEmits(['on-save', 'on-close'])

let addheader = ref() // 表单

let from = ref({}) // 表单数据
let mapComponents = ref() // 地图实例
// 获取geojson数据并进行地图绘制
const setMapData = () => {
  nextTick(() => {
    if (from.value.jsonUrl) {
      let jsondata = JSON.parse(from.value.jsonUrl)
      mapComponents.value.mapdrawsurface(jsondata, 'yellow');
      return
    }
  });
}
onMounted(() => {
  setMapData()
})

// 保存数据
const onSave = () => {
  // 获取地图中已绘制的图形geojson数据并处理后交付给数据表单，触发父组件保存回调并携带表单数据
  let jsonUrl = mapComponents.value.getgetGeojson();
  emit('on-save', JSON.stringify(jsonUrl))
}

// 关闭直接触发父组件关闭回调
const onClose = () => {
  emit('on-close', false)
}
</script>
